<template>
	<div class="studentNote">
		<div class="teach_h">
			<span>我的笔记</span>
		</div>
		<div class="footprint" v-loading="loading">
			<ul>
				<li class="teachVideo_ls clear" v-for="(item, index) in noteList" :key="item.id">
					<a @click="openClass(item.videoid, item._video_time)" class="teachVideo_lsl fl box">
						<img :src="BASE_URL+'/'+item.video_image" :onerror="errorImg">
					</a>
					<div class="teachVideo_lsr">
						<div class="teachVideo_lsr1 clear">
							<a @click="openClass(item.videoid, item._video_time)">
								<span>笔记：</span>{{item.content}}
							</a>
							<div class="teachVideo_lsr1_r fr">
								<el-popover placement="bottom" width="" popper-class="ioperation_hover" trigger="hover">
									<ul class="r_ioperation">
										<li @click="commentBox(index)">编辑</li>
										<li @click="removeData(item.id)">删除</li>
									</ul>
									<i slot="reference" class="el-icon-arrow-down"></i>
								</el-popover>
							</div>
						</div>
						<!--  -->
						<div class="teachVideo_lsr4">
							<span>节点：{{item._video_time}}</span>
						</div>
						<!-- 3 -->
						<div class="teachVideo_lsr6 clear">
							<span>{{item.create_time}}</span>
						</div>
					</div>
					<transition name="el-fade-in-linear">
						<div class="classTeest_rTx" v-show="item.showCommentBox">
							<div class="classTeest_rPT">
								<el-input type="textarea" :rows="4" resize="none" maxlength="140" placeholder="请输入内容" v-model.trim="item.content">
								</el-input>
								<span><i>{{item.content.length}}</i>/140</span>
							</div>
							<div class="classTeest_rPB">
								<el-button type="primary" plain @click="removeCommentBox(index)">取消</el-button>
								<el-button type="primary" @click="replyComments(item.id, item.content)">保存</el-button>
							</div>
						</div>
					</transition>
				</li>
			</ul>
		</div>
		<div class="pageBox" v-if="total_number > page_size">
			<el-pagination @current-change="change_page" :page-size="page_size" :current-page="page_index" layout="prev, pager, next" :total="total_number">
			</el-pagination>
		</div>
		<div class="dependent" v-if="placeholder">
			<i class="ipm image_nofound"></i>
			<p>
				还没发现任何相关的内容哦~
			</p>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			videoid: this.$route.query.id,
			noteList: [],
			total_number: 0,
			page_size: this.$g.page_size,
			page_index: 1,
			commentVal2: '',
			errorImg: 'this.src="' + require('../../../public/images/image20.png') + '"',
			placeholder: false,
			loading: true,
			errorImg: 'this.src="' + require('../../../public/images/image20.png') + '"'
		}
	},
	created() {
		this.getNote()
	},
	methods: {
		removeData(id) {
			this.$confirm('是否要删除该笔记?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				customClass: 'confirm-them'
			}).then(() => {

				let success = (res => {
					this.$message.success(res.msg)
					this.getNote()
				})
				this.$ajax({
					url: 'api/video/video_note',
					method: 'delete',
					params: {
						id: id,
					},
					func: {
						success: success
					}
				})
			}).catch(() => {});
		},
		/*
			跳转到公开课模块查看视频
		 */
		openClass(id, time) {
			let host = sessionStorage.getItem('host')
			let redirectParams = sessionStorage.getItem('redirect_params')
			let link = `${this.BASE_URL}${redirectParams}&host=${host}&routerUrl=/home/openclassDetail&id=${id}`
			window.open(link)
		},
		setTime(k) {
			var a = k;
			let arr = a.split(':');
			let h = parseInt(arr[0]);
			let m = parseInt(arr[1]);
			let s = parseInt(arr[2]);
			s = s * 1000;
			m = m * 1000 * 60;
			h = h * 1000 * 60 * 24;
			let sum = (s + m + h) / 1000
			return sum;
		},
		getNote() {
			let success = (res => {
				let data = res.data;
				this.noteList = data.data;
				this.total_number = data.data_sum;
				this.page_index = parseInt(data.page_index)
				for (var i = 0; i < this.noteList.length; i++) {
					this.commentVal2 = this.noteList[i].content
				}

				this.loading = false
				this.placeholder = this.noteList.length === 0 ? true : false
			});
			this.$ajax({
				url: 'api/video/video_note_list',
				method: 'get',
				params: {
					userid: this.$g.user_id,
					page_index: this.page_index,
					page_size: this.page_size,
					videoid: this.videoid
				},
				func: {
					success: success
				}
			})
		},
		change_page(val) {
			this.page_index = val;
			this.getNote()
		},
		editNotes(res_id) {
			let success = (res => {});
			this.$ajax({
				url: 'api/video/video_note',
				method: 'put',
				data: {
					id: res_id,
					content: this.commentVal2
				},
				func: {
					success: success
				}
			})
		},
		//回复--评论
		//评论框
		commentBox(index) {
			this.noteList[index].showCommentBox = true;
		},
		removeCommentBox(index) {
			this.noteList[index].showCommentBox = false;
		},
		//回复评论
		replyComments(res_id, content) {
			if (this.commentVal2.length < 0) {
				this.$message.error('回复不能为空哦~');
				return
			}
			let success = (res => {
				this.$message.success(res.msg);
				this.commentVal2 = ''
				this.getNote()
			})
			this.$ajax({
				url: 'api/video/video_note',
				method: 'put',
				data: {
					content: content,
					id: res_id,

				},
				func: {
					success: success
				}
			})
		},
	}
}
</script>